<template>
  <div class="serve">
    <div class="headerh">
      <van-icon name="arrow-left" class="tubiao" @click="$router.back()" />
      <span>找家政服务记录</span>
    </div>
    <!-- 家政公司人员导航 -->
    <div class="active" v-for="(item, index) in serverWomenLiset" :key="index">
      <div class="servers-list" @click="$router.push(`/yuesaopage/${item.id}`)">
        <div class="header">
          <van-image width="80" height="80" :src="item.img"></van-image>
          <div class="mingpian">
            <div class="names">{{ item.name }}</div>
            <div class="tag">
              <van-tag
                round
                type="primary"
                :key="index"
                plain
                v-for="(tag, index) in item.tags"
                >{{ tag }}</van-tag
              >
            </div>
            <div class="jingli">
              <span v-if="item.address"> {{ item.address }} |</span>
              <span v-if="item.age"> {{ item.age }} |</span>
              <span v-if="item.experience"> {{ item.experience }} |</span>
              <span v-if="item.comment"> {{ item.comment }}</span>
            </div>
            <div class="qian">8000/26天</div>
          </div>
        </div>
      </div>
    </div>
    <!--/ 家政公司人员导航 -->
  </div>
</template>
<script>
import { getBabySitter } from '@/api/home.js'
export default {
  data () {
    return {
      serverWomenLiset: []
    }
  },
  created () {
    this.loadServers()
  },
  methods: {
    async loadServers () {
      try {
        const { data } = await getBabySitter()
        this.serverWomenLiset = data
      } catch (err) {
        this.$toast.fail('获取失败')
      }
    }
  }
}
</script>
<style lang="less">
.serve {
  .headerh {
    height: 100px;
    background-color: #3f51b5;
    color: #fff;
    font-size: 32px;
    padding-top: 20px;
    padding-left: 13px;
    span {
      position: absolute;
      top: 45px;
      left: 72px;
      padding-left: 20px;
      font-weight: 700;
    }
    .tubiao {
      position: absolute;
      top: 52px;
      left: 26px;
      padding-left: 20px;
    }
  }
  .active {
    .servers-list {
      background-color: #fff;
      border-bottom: 1px solid #f5f7f9;
      .server-item-head {
        .van-image {
          padding: 20px;
          box-sizing: border-box;
        }
        .van-row {
          .van-cell {
            padding: 0;
            border: none;
          }
        }
      }
      .van-cell__title {
        font-weight: 600;
        font-size: 30px;
      }
      .header {
        display: flex;
        .van-image {
          margin-left: 10px;
          margin-top: 20px;
        }
        .mingpian {
          position: relative;
          flex: 1;
          margin-left: 15px;
          padding: 20px;
          padding-left: 6px;
          display: flex;
          flex-direction: column;
          font-size: 30px;
          color: #101010;
          box-sizing: border-box;
          .names {
            font-size: 28px;
            color: #000;
            font-weight: 600;
          }
          .jingli {
            font-size: 12px;
            color: #979191;
            margin-top: 10px;
          }
          .tag {
            flex: 1;
            .van-tag {
              padding: 10px 30px;
              margin-right: 10px;
              margin-top: 30px;
            }
          }
          .qian {
            position: absolute;
            top: 25px;
            right: 22px;
            font-size: 26px;
            color: #979191;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
